Ajax 之 [ jQuery中的Ajax ]

头像
蔡志远
    阅读 5 分钟

    jQuery中的Ajax

    在jQuery中使用Ajax

    • 在jQuery提供了一系列的方法来对Ajax进行操作

      • load()方法
      • $.get()方法
      • $.post()方法
      • ajax()方法
      • $.getScript()方法
      • $.getJSON()方法

    load()方法

    • 参数

      • 第一个参数 - 表示异步交互的请求地址

      • 第二个参数 - 表示异步交互的请求数据

        • 省略请求数据时，当前的请求方式为 GET
        • 发送请求数据时，当前的请求方式为 POST
      • 第三个参数 - 表示异步交互请求成功后的回调函数

    • 该方法具有返回值

      • 服务器端的响应结果

    注意

    • 会自动将返回结果写到HTML页面的指定目标元素中

    示例代码

    <body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $btn.load( 'JSON.json', {name:'融念冰'}, function () {
            console.log( '三步白头' );
        } );
    } );
</script>
</body>

    $.get()方法

    • 该方法的请求方式为 GET

    • 参数

      • 第一个参数 - 表示异步交互的请求地址
      • 第二个参数 - 表示异步交互的请求数据

      • 第三个参数 - 表示异步交互请求成功后的回调函数

        • response参数 - 表示获取当前的JSON文件内容

      • 第四个参数 - 表示设置服务器端响应结果的格式

        • xml、html、script、json、text等

    示例代码

    <body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.get( 'JSON.json', {name:'融念冰'}, function ( response ) {
            console.log( response );
        }, 'json' );
</script>
</body>

    $.post()方法

    • 该方法的请求方式为 POST

    • 参数

      • 第一个参数 - 表示异步交互的请求地址
      • 第二个参数 - 表示异步交互的请求数据

      • 第三个参数 - 表示异步交互请求成功后的回调函数

        • response参数 - 表示获取当前的JSON文件内容

      • 第四个参数 - 表示设置服务器端响应结果的格式

        • xml、html、script、json、text等

    示例代码

    <body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.post( 'JSON.json', {name:'融念冰'}, function ( response ) {
            console.log( response );
        }, 'json' );
    } );
</script>
</body>

    ajax()方法

    • 参数

      • 第一个参数 - 表示异步交互请求的地址

      • 第二个参数 - 表示设置异步交互请求的

        • 该参数的可选项
        • type - 设置当前的请求方式
        • data - 发送给服务器端的请求数据
        • dataType - 服务器端响应结果的格式

        • success - 异步交互请求成功后的回调函数

          • 回调函数的参数

            • data - 表示服务器端响应的结果
            • textStatus - 表示服务器端当前的状态
            • jqXHR - Ajax中的核心对象

    示例代码

    <body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.ajax( 'JSON.json', {
            type : 'get',
            dataType : 'text',
            success : function( data ) {
                console.log( data );
            }
        } );
    } );
</script>
</body>

    $.getScript()方法

    • 该方法的请求方式为 GET

    • 参数

      • 第一个参数 - 表示请求JavaScript文件的地址

      • 第二个参数 - 指定JavaScript文件加载成功的回调函数

        • 该回调函数的参数
        • data - 表示获取指定文件的内容

    示例代码

    <body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.getScript( 'JS.js', function( data ) {
            console.log( data );
            eval( data );
        } );
    } );
</script>
</body>

    $.getJSON()方法

    • 该方法的请求方式为 GET

    • 参数

      • 第一个参数 - 表示请求JavaScript文件的地址
      • 第二个参数 - 表示发送给服务器端的数据内容

      • 第三个参数 - 指定JavaScript文件加载成功的回调函数

        • 该回调函数的参数
        • data - 表示获取指定文件的内容

    示例代码

    <body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.getJSON( 'JS.js',{name:'唐三'}, function( data ) {
            console.log( data );
        } );
    } );
</script>
</body>

    异步提交表单

    <body>
<form action="#">
    <input type="text" id="name">
    <input type="submit">
</form>
<script src="chajian/jquery.js"></script>
<script>
    var $form = $( 'form' );
    $form.bind( 'submit', function( event ) {
        // 通过事件属性来阻止表单提交的默认行为
        event.preventDefault();
        // 通过val()方法来获取表单组件的数据内容
        var name = $( '#name' ).val();
        // 构建发送给服务器端的数据格式
        var data = 'name=' + name;
        // 通过异步交互提交表单
        $.post( 'JSON.json', data, function( response ) {
            console.log( response );
        } );
    } );
</script>
</body>

    表单序列化

    • 根据表单默认同步提交获取数据的方式

    serialize()方法

    • 将数据内容序列化为指定格式的字符串内容

    serializeArray()方法

    • 将数据内容序列化为JSON格式的数据内容

    示例代码

    <body>
<form action="#">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="pwd">
    <input type="submit">
</form>
<script src="chajian/jquery.js"></script>
<script>
    var $form = $( 'form' );
    $form.bind( 'submit', function( event ) {
        // 阻止默认行为
        event.preventDefault();
        /*
            根据表单默认同步提交获取数据的方式
             * serialize()方法
              * 将数据内容序列化为指定格式的字符串内容
             * serializeArray()方法
              * 将数据内容序列化为JSON格式的数据内容
         */

        // var data = $form.serialize();

        var data = $form.serializeArray();
        console.log(data);
        // 3.通过异步交互提交表单
        $.post( 'JSON.json', data, function( response ) {
            console.log( response );
        } );
    } );

</script>
</body>
    ajax前端jquery
    蔡志远
    9 声望5 粉丝
    « 上一篇
    Ajax 异步交互

    引用和评论

    推荐阅读
    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.5k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    0 条评论
    得票最新